<template>
<div class="transfer-page header-page">
  <o-header v-show="thisShowOHeader"
            :showbar="showobar"
            :num="num">
  </o-header>
  <x-header :left-options="{ backText: '' }"
            :right-options="{ showMore: true }"
            @on-click-more="showMenus = true"
            title="传输列表"
            ref="header">
  </x-header>
  <div class="transfer-tab">
    <tab active-color="#2486F5"
         bar-active-color="#2486F5"
         v-model="tabIndex">
      <tab-item>下载列表</tab-item>
      <tab-item>上传列表</tab-item>
    </tab>
    <swiper v-model="tabIndex"
            :show-dots="false"
            height="100%">
      <swiper-item>
        <scroll :scrollbar="true">
          <div>
            <div class="transfer-netdisk">文件下载至：/storage/emulated/0/Netdisk</div>
            <div class="transfer-down">正在下载（4）</div>
            <group :gutter="0">
              <folder :checkbox="checkbox"
                      :folderImg="folderImg"
                      fileSize="20kb"
                      :transfer="true"
                      :transferType="1"
                      :transferStatus="0"
                      :transferPercent="10"></folder>
              <folder :checkbox="checkbox"
                      :folderImg="folderImg"
                      fileSize="20kb"
                      :transfer="true"
                      :transferType="1"
                      :transferStatus="0"
                      :transferPercent="20"></folder>
              <folder :checkbox="checkbox"
                      :folderImg="folderImg"
                      fileSize="20kb"
                      :transfer="true"
                      :transferType="1"
                      :transferStatus="0"
                      :transferPercent="30"></folder>
              <folder :checkbox="checkbox"
                      :folderImg="folderImg"
                      fileSize="20kb"
                      :transfer="true"
                      :transferType="1"
                      :transferStatus="0"
                      :transferPercent="50"></folder>
              <folder :checkbox="checkbox"
                      :folderImg="folderImg"
                      fileSize="20kb"
                      :transfer="true"
                      :transferType="1"
                      :transferStatus="0"
                      :transferPercent="90"></folder>
            </group>
            <div class="transfer-down">下载完成（3）</div>
            <group :gutter="0">
              <folder :checkbox="checkbox"
                      :folderImg="folderImg"></folder>
              <folder :checkbox="checkbox"
                      :folderImg="folderImg"></folder>
              <folder :checkbox="checkbox"
                      :folderImg="folderImg"></folder>
            </group>
          </div>
        </scroll>
      </swiper-item>
      <swiper-item>
        <scroll :scrollbar="true">
          <div>
            <div class="transfer-down">正在上传（4）</div>
            <group :gutter="0">
              <folder :checkbox="checkbox"
                      :folderImg="folderImg"
                      fileSize="20kb"
                      :transfer="true"
                      :transferType="0"
                      :transferStatus="0"
                      :transferPercent="10"></folder>
              <folder :checkbox="checkbox"
                      :folderImg="folderImg"
                      fileSize="20kb"
                      :transfer="true"
                      :transferType="0"
                      :transferStatus="0"
                      :transferPercent="20"></folder>
              <folder :checkbox="checkbox"
                      :folderImg="folderImg"
                      fileSize="20kb"
                      :transfer="true"
                      :transferType="0"
                      :transferStatus="0"
                      :transferPercent="30"></folder>
              <folder :checkbox="checkbox"
                      :folderImg="folderImg"
                      fileSize="20kb"
                      :transfer="true"
                      :transferType="0"
                      :transferStatus="0"
                      :transferPercent="50"></folder>
              <folder :checkbox="checkbox"
                      :folderImg="folderImg"
                      fileSize="20kb"
                      :transfer="true"
                      :transferType="0"
                      :transferStatus="0"
                      :transferPercent="90"></folder>
            </group>
            <div class="transfer-down">上传完成（3）</div>
            <group :gutter="0">
              <folder :checkbox="checkbox"
                      :folderImg="folderImg"></folder>
              <folder :checkbox="checkbox"
                      :folderImg="folderImg"></folder>
              <folder :checkbox="checkbox"
                      :folderImg="folderImg"></folder>
              <folder :checkbox="checkbox"
                      :folderImg="folderImg"></folder>
              <folder :checkbox="checkbox"
                      :folderImg="folderImg"></folder>
              <folder :checkbox="checkbox"
                      :folderImg="folderImg"></folder>
              <folder :checkbox="checkbox"
                      :folderImg="folderImg"></folder>
              <folder :checkbox="checkbox"
                      :folderImg="folderImg"></folder>
              <folder :checkbox="checkbox"
                      :folderImg="folderImg"></folder>
              <folder :checkbox="checkbox"
                      :folderImg="folderImg"></folder>
              <folder :checkbox="checkbox"
                      :folderImg="folderImg"></folder>
              <folder :checkbox="checkbox"
                      :folderImg="folderImg"></folder>
            </group>
          </div>
        </scroll>
      </swiper-item>
    </swiper>
  </div>
  <div v-transfer-dom>
    <actionsheet :menus="menus"
                 v-model="showMenus"
                 show-cancel></actionsheet>
  </div>
</div>

</template>

<script>
import { XHeader, Group, TransferDom, Actionsheet, Tab, TabItem, Swiper, SwiperItem } from 'vux';
import { mapState, mapActions } from 'vuex';
import folderImg from '../assets/icon_list_txtfile.png';
import folder from '../components/folder';
import oHeader from '../components/oHeader';
import Scroll from '../components/scroll';

export default {
  components: {
    XHeader,
    Group,
    folder,
    oHeader,
    Actionsheet,
    Tab,
    TabItem,
    Swiper,
    SwiperItem,
    Scroll
  },
  directives: {
    TransferDom
  },
  data() {
    return {
      checkbox: {
        check: false
      },
      folderImg,
      menus: {
        menu1: '多选',
        menu2: '全部暂停'
      },
      showMenus: false,
      thisShowOHeader: false,
      showobar: [
        'delete'
      ],
      num: 0,
      tabIndex: 0
    }
  },
  computed: {

  },
  methods: {
    ...mapActions([
          'updateHeaderHeight',
          'showOHeader'
    ]),
    setStyle() {
      const top = this.$refs.header.$el.offsetHeight
      document.getElementById('oheader').style.height = top + 'px'
      this.updateHeaderHeight(top)
      this.thisShowOHeader = true
    }
  },
  created() {
    setTimeout(() => {
      this.$root.$on('click-cell', () => {
        alert('hhhh')
      })
      this.$root.$on('longtouch-cell', () => {
        this.checkbox.check = true
      })
      this.$root.$on('hide-oheader', () => {
        this.checkbox.check = false
      })
    })
  },
  mounted() {
    setTimeout(() => {
      this.setStyle()
    }, 300)
  },
  watch: {
    'checkbox.check': function(val) {
      if (val) {
        this.showOHeader(true)
      } else {
        this.showOHeader(false)
      }
    }
  },
  destroyed() {
    this.$root.$off('click-cell')
    this.$root.$off('longtouch-cell')
    this.$root.$off('hide-oheader')
  }
}

</script>

<style>
.transfer-tab {
  height: calc(100% - 46px);
}

.transfer-tab .vux-slider {
  height: calc(100% - 44px);
}

.transfer-netdisk {
  padding: 5px 10px;
  font-size: 13px;
}

.transfer-down {
  padding: 2px 10px;
  font-size: 13px;
  background-color: #eaeaea;
}
</style>
